<template>
  <el-dialog title="报警弹窗" :visible.sync="show" width="30%" :before-close="close" :close-on-click-modal="false">
    <el-descriptions title="报警信息" :column="1" border :labelStyle="{ width: '120px' }">
      <el-descriptions-item>
        <template slot="label">
          报警地点
        </template>
        {{ alertList[0].deviceAddress }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          设备名称
        </template>
        {{ alertList[0].deviceName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          报警类型
        </template>
        {{ alertList[0].alarmName }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          状态
        </template>
        {{ alertList[0].confirmRemark }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          报警时间
        </template>
        {{ alertList[0].alertTime }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          设备类别
        </template>
        {{ dictChange(alertList[0].deviceType) }}
      </el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script>
import mapApi from '@/api/gaode-map.js'
import dictApi from '@/api/dict-list'
export default {
  name: 'WarnBox',
  data() {
    return {
      alertList: [],
      deviceTypeList: [],
      show: false
    }
  },
  watch: {
    alertList(newVal, oldVal) {
      //   console.log(newVal, oldVal)
      if (newVal.length > oldVal.length && newVal[0].confirmRemark == '未确认') {
        this.show = true
      }
    }
  },
  created() {
    this.getAlertList()
    this.getdeviceTypeList()
  },
  mounted() {
    this.timer = setInterval(() => {
      this.getAlertList()
    }, 10000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    getAlertList() {
      mapApi.getAlertList().then(res => {
        if (res.status === 200) {
          this.alertList = res.data.data.rows
        }
      })
    },
    getdeviceTypeList() {
      dictApi.getdeviceTypeList().then(res => {
        if (res.status === 200) {
          this.deviceTypeList = res.data.dictValue
        }
      })
    },
    dictChange(id) {
      let val = this.deviceTypeList.find(e => {
        return id == e.dictValue
      })
      if (val) {
        return val.dictText
      }
    },
    close() {
      this.show = false
    }
  }
}
</script>

<style></style>
